<script setup lang="ts">
const currentPage = defineModel('currentPage')
const pageSize = defineModel('pageSize')
const {
  disabled = false,
  total = 0,
  size = 'default',
} = defineProps<{
  disabled?: boolean
  total: number
  size?: 'default' | 'small' | 'large'
}>()

const emit = defineEmits(['sizeChange', 'currentChange'])
const handleSizeChange = (val: number) => {
  emit('sizeChange', val)
}
const handleCurrentChange = (val: number) => {
  emit('currentChange', val)
}

export interface PageType {
  currentPage: number
  pageSize: number
  total: number
}
</script>

<template>
  <div class="flex justify-end">
    <el-pagination
      class="pt-4"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20, 50, 100]"
      :disabled="disabled"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :size="size"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped></style>
